<template>
    <div class="p-6 space-y-6">
        <!-- 页面标题 -->
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">表单设计器</h2>
                <p class="text-gray-600 dark:text-gray-400 mt-1">可视化表单设计和配置</p>
            </div>
            <div class="flex items-center gap-2">
                <button class="btn-secondary flex items-center gap-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
                    </svg>
                    预览
                </button>
                <button class="btn-primary flex items-center gap-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                    </svg>
                    保存
                </button>
            </div>
        </div>

        <!-- 设计器区域 -->
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 h-[calc(100vh-200px)]">
            <!-- 组件库 -->
            <div class="card">
                <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">组件库</h3>
                <div class="space-y-2">
                    <div v-for="component in componentLibrary" :key="component.type"
                         class="p-3 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer transition-colors"
                         draggable="true" @dragstart="handleDragStart($event, component)">
                        <div class="flex items-center gap-3">
                            <div
                                 class="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
                                <svg class="w-4 h-4 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor"
                                     viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          :d="component.icon" />
                                </svg>
                            </div>
                            <div>
                                <div class="font-medium text-gray-900 dark:text-gray-100">{{ component.name }}</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">{{ component.description }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 设计画布 -->
            <div class="lg:col-span-2 card">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">设计画布</h3>
                    <div class="flex items-center gap-2">
                        <button class="btn-secondary text-sm">清空</button>
                        <button class="btn-secondary text-sm">撤销</button>
                        <button class="btn-secondary text-sm">重做</button>
                    </div>
                </div>

                <div class="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-4 min-h-[500px] bg-gray-50 dark:bg-gray-800/50"
                     @dragover="handleDragOver" @drop="handleDrop">
                    <div v-if="formComponents.length === 0" class="text-center text-gray-500 dark:text-gray-400 py-20">
                        <svg class="w-16 h-16 mx-auto mb-4 text-gray-300 dark:text-gray-600" fill="none"
                             stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                        </svg>
                        <p>拖拽组件到此处开始设计表单</p>
                    </div>

                    <div v-else class="space-y-4">
                        <div v-for="(component, index) in formComponents" :key="component.id"
                             class="p-4 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 hover:border-blue-300 dark:hover:border-blue-600 transition-colors"
                             :class="{ 'border-blue-500 dark:border-blue-400': selectedComponent?.id === component.id }"
                             @click="selectComponent(component)">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ component.label
                                    }}</span>
                                <div class="flex items-center gap-1">
                                    <button class="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                        </svg>
                                    </button>
                                    <button class="p-1 text-red-400 hover:text-red-600 dark:hover:text-red-300"
                                            @click.stop="removeComponent(index)">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                        </svg>
                                    </button>
                                </div>
                            </div>

                            <!-- 组件预览 -->
                            <div class="text-sm text-gray-500 dark:text-gray-400">
                                <div v-if="component.type === 'input'"
                                     class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded bg-gray-50 dark:bg-gray-700">
                                    {{ component.placeholder || '请输入...' }}
                                </div>
                                <div v-else-if="component.type === 'select'"
                                     class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded bg-gray-50 dark:bg-gray-700">
                                    请选择...
                                </div>
                                <div v-else-if="component.type === 'textarea'"
                                     class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded bg-gray-50 dark:bg-gray-700 h-20">
                                    {{ component.placeholder || '请输入...' }}
                                </div>
                                <div v-else-if="component.type === 'radio'" class="space-y-2">
                                    <label class="flex items-center gap-2">
                                        <input type="radio" disabled class="text-blue-600" />
                                        <span>选项1</span>
                                    </label>
                                    <label class="flex items-center gap-2">
                                        <input type="radio" disabled class="text-blue-600" />
                                        <span>选项2</span>
                                    </label>
                                </div>
                                <div v-else-if="component.type === 'checkbox'" class="space-y-2">
                                    <label class="flex items-center gap-2">
                                        <input type="checkbox" disabled class="text-blue-600" />
                                        <span>选项1</span>
                                    </label>
                                    <label class="flex items-center gap-2">
                                        <input type="checkbox" disabled class="text-blue-600" />
                                        <span>选项2</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 属性面板 -->
            <div class="card">
                <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">属性面板</h3>

                <div v-if="selectedComponent" class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">标签名称</label>
                        <input type="text" v-model="selectedComponent.label" class="input" />
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">字段名称</label>
                        <input type="text" v-model="selectedComponent.name" class="input" />
                    </div>

                    <div v-if="selectedComponent.type === 'input' || selectedComponent.type === 'textarea'">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">占位符</label>
                        <input type="text" v-model="selectedComponent.placeholder" class="input" />
                    </div>

                    <div v-if="selectedComponent.type === 'input'">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">输入类型</label>
                        <select v-model="selectedComponent.inputType" class="input">
                            <option value="text">文本</option>
                            <option value="email">邮箱</option>
                            <option value="password">密码</option>
                            <option value="number">数字</option>
                            <option value="tel">电话</option>
                            <option value="url">网址</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">是否必填</label>
                        <label class="flex items-center gap-2">
                            <input type="checkbox" v-model="selectedComponent.required"
                                   class="rounded border-gray-300 text-blue-600 focus:ring-blue-500" />
                            <span class="text-sm text-gray-700 dark:text-gray-300">必填字段</span>
                        </label>
                    </div>

                    <div v-if="selectedComponent.type === 'textarea'">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">行数</label>
                        <input type="number" v-model="selectedComponent.rows" class="input" min="1" max="10" />
                    </div>
                </div>

                <div v-else class="text-center text-gray-500 dark:text-gray-400 py-8">
                    <svg class="w-16 h-16 mx-auto mb-4 text-gray-300 dark:text-gray-600" fill="none"
                         stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                    </svg>
                    <p>选择一个组件查看属性</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="lowcode-form-designer">
import { ref } from 'vue'

defineOptions({ name: 'lowcode-form-designer' })

const componentLibrary = ref([
    {
        type: 'input',
        name: '单行输入框',
        description: '文本输入组件',
        icon: 'M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z'
    },
    {
        type: 'textarea',
        name: '多行文本框',
        description: '长文本输入组件',
        icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
    },
    {
        type: 'select',
        name: '下拉选择框',
        description: '选项选择组件',
        icon: 'M19 9l-7 7-7-7'
    },
    {
        type: 'radio',
        name: '单选框组',
        description: '单选组件',
        icon: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'
    },
    {
        type: 'checkbox',
        name: '复选框组',
        description: '多选组件',
        icon: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'
    }
])

const formComponents = ref<any[]>([])
const selectedComponent = ref<any>(null)

let componentId = 1

function handleDragStart(event: DragEvent, component: any) {
    if (event.dataTransfer) {
        event.dataTransfer.setData('text/plain', JSON.stringify(component))
    }
}

function handleDragOver(event: DragEvent) {
    event.preventDefault()
}

function handleDrop(event: DragEvent) {
    event.preventDefault()
    const componentData = event.dataTransfer?.getData('text/plain')
    if (componentData) {
        const component = JSON.parse(componentData)
        addComponent(component)
    }
}

function addComponent(component: any) {
    const newComponent = {
        id: componentId++,
        type: component.type,
        label: component.name,
        name: `field_${componentId}`,
        placeholder: '',
        required: false,
        inputType: 'text',
        rows: 3
    }
    formComponents.value.push(newComponent)
}

function selectComponent(component: any) {
    selectedComponent.value = component
}

function removeComponent(index: number) {
    formComponents.value.splice(index, 1)
    if (selectedComponent.value && selectedComponent.value.id === formComponents.value[index]?.id) {
        selectedComponent.value = null
    }
}
</script>